<template>
  <div class="content-view-wrapper pd-10 purchasingPlanDetail">
    <div class="header">
      <div class="title">采购计划执行明细</div>
      <div class="search-box">
        <div>
          <el-select
            v-model="quarter"
            placeholder="请选择季度"
            style="margin: 0 10px"
            @change="quarterChange"
          >
            <el-option
              v-for="item in quarterOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="quarter"
            placeholder="请选择季度"
            style="margin: 0 10px"
            @change="quarterChange"
          >
            <el-option
              v-for="item in quarterOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search">
          <el-date-picker v-model="year" :clearable="false" placeholder="选择年" type="year" @change="yearChange">
          </el-date-picker>
          <el-select
            v-model="quarter"
            placeholder="请选择季度"
            style="margin: 0 10px"
            @change="quarterChange"
          >
            <el-option
              v-for="item in quarterOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="month" placeholder="请选择月" @change="monthChange" @focus="monthFocus">
            <el-option
              v-for="item in monthOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="detail-content">
      <div class="detail-2">
        <div class="detail-header bb">
          <div class="left">
            <div>调度单执行明细</div>
            <el-radio-group v-model="radio1" @change="radioChange">
              <el-radio-button v-for="item in radioList" :key="item.value" :label="item.value">{{item.label}}</el-radio-button>
            </el-radio-group>
          </div>
          <div class="right">当前时间进度：<span>80.21%</span></div>
        </div>
        <div class="detail2-content">
          <div class="detail1-row1 bb">
            <div>
              <div class="tit">已发货</div>
              <div class="count"><span>10</span>吨</div>
            </div>
            <div>
              <div class="tit">已签收</div>
              <div class="count"><span>10</span>吨</div>
            </div>
            <div>
              <div class="tit">已调度</div>
              <div class="count"><span>10</span>吨</div>
            </div>
            <div>
              <div class="tit">未调度</div>
              <div class="count"><span>10</span>吨</div>
            </div>
          </div>
          <div class="detail1-row1 bb">
            <div>
              <div class="tit">调度单发货量</div>
              <div class="count"><span>10</span>吨</div>
            </div>
            <div>
              <div class="tit">物流计划量</div>
              <div class="count"><span>10</span>吨</div>
            </div>
            <div>
            </div>
            <div>
            </div>
          </div>
          <div class="detail2-row2">
            <div>
              <div class="tit">调度单执行率 =已发运量/调度单发货量</div>
              <div class="detail2-row2-bottom">
                <div class="percentage">70%</div>
                <div class="ring-chart" ref="ringChart2"></div>
              </div>
            </div>
            <div>
              <div class="tit">计划完成进度 =已发运量/物流计划量</div>
              <div class="detail2-row2-bottom">
                <div class="percentage">70%</div>
                <div class="ring-chart" ref="ringChart3"></div>
              </div>
            </div>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="调度单号">
            </el-table-column>
            <el-table-column
              prop="name"
              label="产品四级分类">
            </el-table-column>
            <el-table-column
              prop="address"
              label="要求发货量">
            </el-table-column>
            <el-table-column
              prop="address"
              label="已发货（吨）">
            </el-table-column>
            <el-table-column
              prop="address"
              label="已签收（吨）">
            </el-table-column>
            <el-table-column
              prop="address"
              label="已调度（吨）">
            </el-table-column>
            <el-table-column
              prop="address"
              label="未调度（吨）">
            </el-table-column>
            <el-table-column
              prop="address"
              label="运输方式">
            </el-table-column>
            <el-table-column
              prop="address"
              label="业务单数量">
            </el-table-column>
            <el-table-column
              prop="address"
              label="订单数量">
            </el-table-column>
            <el-table-column
              prop="address"
              label="运单数量">
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-top: 8px;"
            background
            layout="total,prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment/moment'
import {getMonths, quarters} from '@/views/businessExecution/hooks'
import * as echarts from 'echarts'

export default {
  name: "purchasingPlanDetail",
  data () {
    return {
      activeTab: "1",
      year: moment().format("YYYY"),
      month: "",
      quarter: "",
      quarterOptions: quarters,
      monthOptions: [],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      radio1:"1",
      radioList:[
        {
          label:'全部',
          value:"1"
        },
        {
          label:'汽运',
          value:"2"
        },
        {
          label:'铁运',
          value:"3"
        },
        {
          label:'多式联运',
          value:"4"
        },
      ]
    }
  },
  mounted () {
    this.initChart2()
    this.initChart3()
  },
  methods: {
    yearChange () {
    },
    quarterChange () {
      this.month = ""
      this.monthOptions = getMonths(this.quarter)
    },
    monthChange () {
    },
    radioChange(){

    },
    initChart1 () {
      let chart = echarts.init(this.$refs.ringChart1);
      let option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          show: false
        },
        polar: {
          center: ["50%", "50%"],
          radius: ["50%", "80%"]
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: [60],
            name: "",
            type: "bar",
            roundCap: false,
            showBackground: true,
            backgroundStyle: {
              color: "#ddd"
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: "#f59a23"
              }
            }
          }
        ]
      };
      chart.setOption(option);
      window.onresize = () => {
        chart.resize();
      };
    },
    initChart2 () {
      let chart = echarts.init(this.$refs.ringChart2);
      let option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          show: false
        },
        polar: {
          center: ["50%", "50%"],
          radius: ["50%", "80%"]
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: [80],
            name: "",
            type: "bar",
            roundCap: false,
            showBackground: true,
            backgroundStyle: {
              color: "#ddd"
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: "#f59a23"
              }
            }
          }
        ]
      };
      chart.setOption(option);
      window.onresize = () => {
        chart.resize();
      };
    },
    initChart3 () {
      let chart = echarts.init(this.$refs.ringChart3);
      let option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          show: false
        },
        polar: {
          center: ["50%", "50%"],
          radius: ["50%", "80%"]
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: [45],
            name: "",
            type: "bar",
            roundCap: false,
            showBackground: true,
            backgroundStyle: {
              color: "#ddd"
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: "#f59a23"
              }
            }
          }
        ]
      };
      chart.setOption(option);
      window.onresize = () => {
        chart.resize();
      };
    }
  }
}
</script>
<style lang="scss" scoped>
.purchasingPlanDetail {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  --container-padding: 20px;
  --font-normal: #929292;
  --font-primary: #272727;

  .header {
    background-color: #fff;
    margin-bottom: 10px;
    padding: var(--container-padding);
    display: flex;
    flex-direction: column;

    .title {
      font-size: 20px;
      margin-bottom: 10px;
    }

    .search-box {
      display: flex;
      justify-content: space-between;

      .tab-list {
        margin-bottom: -20px;
      }
    }
  }

  .detail-content {
    flex: 1;
    .bb {
      border-bottom: 1px solid #e5e5e5;
    }

    .percentage {
      font-size: 18px;
      color: #ef95b1;
      font-weight: bold;
    }
    .ring-chart{
      width: 120px;
      height: 100%;
    }
    .detail-header {
      display: flex;
      justify-content: space-between;

      .left {
        font-size: 16px;
        color: var(--font-primary);
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 20px;
      }

      .right {
        font-size: 14px;
        color: var(--font-normal);
        padding: 20px;
        display: flex;
        align-items: center;
      }
    }
    .detail1-row1 {
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      >div{
        width: 25%;
        padding: 10px 0;
      }
      .tit {
        font-size: 14px;
        color: var(--font-normal);
        margin-bottom: 8px;
      }

      .count {
        font-size: 18px;
        color: var(--font-primary);
        font-weight: bold;
      }
    }
    .detail-1 {
      background-color: #fff;
      margin-bottom: 10px;

      .detail1-content {
        padding:0 var(--container-padding) 10px;

        .detail-1-row2 {
          padding-top: 10px;

          .tit {
            font-size: 14px;
            color: var(--font-normal);
          }

          .detail-1-row2-bottom {
            display: flex;
            height: 90px;
            align-items: center;
          }
        }
      }
    }

    .detail-2 {
      background-color: #fff;
      padding-bottom: 16px;
      .detail2-content{
        padding:0 var(--container-padding);
        .detail2-row2{
          display: flex;
          gap: 50px;
          padding: 20px 0;
          .tit {
            font-size: 14px;
            color: var(--font-normal);
          }

          .detail2-row2-bottom {
            display: flex;
            height: 90px;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>